<template>
  <view class="container position-relative">
    <view style="margin-bottom: 130rpx">
      <view class="section-1">
        <template>
          <list-cell @click="chooseAddress">
            <view
              class="w-100 d-flex flex-column"
              v-if="
                address.addressDetailed != undefined &&
                address.addressDetailed != '' &&
                address.addressDetailed != null
              "
            >
              <view
                class="d-flex align-items-center justify-content-between mb-10"
              >
                <view class="font-size-extra-lg text-color-base">{{
                  address.addressName
                }}</view>
                <image
                  src="/static/images/navigator-1.png"
                  class="arrow"
                ></image>
              </view>
              <view
                class="d-flex text-color-assist font-size-sm align-items-center"
              >
                <view class="mr-10">{{ address.addressUserName }}</view>
                <view class="mr-10">{{
                  !address.addressUserSex ? "先生" : "女士"
                }}</view>
                <view>{{ address.addressUserPhone }}</view>
              </view>
            </view>
            <view v-else>请选择地址</view>
          </list-cell>
        </template>
      </view>
      <view class="section-2">
        <list-cell last v-for="(item, index) in cart" :key="index">
			<view class="img" style="width: 100rpx; height: 100rpx;margin-right: 20rpx;">
				<image :src="`${imgsrc}${item.goodsImg}`" mode="aspectFit" style="width: 100%;height: 100%;"></image>
			</view>
          <view class="w-100 d-flex flex-column">
            <view class="d-flex align-items-center mb-10">
              <view class="name-and-props overflow-hidden">
				  
                <view class="text-color-base font-size-lg">
                  {{ item.goodsName }}
                </view>
              </view>
              <view
                class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg"
              >
                <view>x{{ item.number }}</view>
                <view>￥{{ item.goodsPrice }}</view>
              </view>
            </view>
            <view class="text-truncate font-size-base text-color-assist">
              {{ item.sku }}
            </view>
          </view>
        </list-cell>
        <list-cell last>
          <view class="flex-fill d-flex justify-content-end align-items-center">
            <view>总计￥{{ total }},实付</view>
            <view class="font-size-extra-lg font-weight-bold"
              >￥{{ amount }}</view
            >
          </view>
        </list-cell>
      </view>
      <view
        class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
        style="padding: 20rpx 0"
      >
        <!-- <view class="iconfont iconhelp line-height-100"></view> -->
        <view></view>
      </view>
      <view class="payment">
        <list-cell last :hover="false">
          <text>支付方式</text>
        </list-cell>
        <list-cell last>
          <view class="d-flex align-items-center justify-content-between w-100">
            <view
              class="iconfont iconwxpay line-height-100 payment-icon"
              style="color: #7eb73a"
            ></view>
            <view class="flex-fill">微信支付</view>
            <view
              class="iconfont iconradio-button-on line-height-100 checkbox checked"
            ></view>
          </view>
        </list-cell>
      </view>
      <view
        class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white"
      >
        <view class="font-size-sm" style="margin-left: 20rpx">合计：</view>
        <view class="font-size-lg flex-fill">￥{{ amount }}</view>
        <view
          class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
          style="padding: 0 60rpx"
          @tap="submit"
        >
          去付款
        </view>

        <!-- </view> -->
      </view>
    </view>
    <modal
      :show="ensureAddressModalVisible"
      custom
      :mask-closable="false"
      :radius="0"
      width="90%"
    >
      <view class="modal-content">
        <view class="d-flex justify-content-end">
          <image
            src="/static/images/pay/close.png"
            style="width: 40rpx; height: 40rpx"
            @tap="ensureAddressModalVisible = false"
          ></image>
        </view>
        <view
          class="d-flex just-content-center align-items-center"
          style="margin-bottom: 40px"
        >
          <view class="font-size-extra-lg text-color-base"
            >请再次确认下单地址</view
          >
        </view>
        <view
          class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20"
        >
          <view
            >{{ address.addressUserName }}
            {{ address.addressUserSex ? "女士" : "先生" }}</view
          >
          <view>{{ address.addressUserPhone }}</view>
        </view>
        <view
          class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40"
        >
          <view>{{ address.addressDetailed + address.addressName }}</view>
        </view>
        <button type="primary" class="pay_btn" @tap="pay">确认</button>
      </view>
    </modal>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import listCell from "@/components/list-cell/list-cell";

export default {
  components: {
    listCell,
  },
  data() {
    return {
      cart: [],
      ensureAddressModalVisible: false,
	  imgsrc: this.$url,
    };
  },
  computed: {
    ...mapState(["address"]),
    ...mapState(["openid"]),
    total() {
      return this.cart.reduce(
        (acc, cur) => acc + cur.number * cur.goodsPrice,
        0
      );
    },
    amount() {
      return this.cart.reduce(
        (acc, cur) => acc + cur.number * cur.goodsPrice,
        0
      );
    },
  },
  onLoad() {
    this.cart = uni.getStorageSync("cart");
	console.log(this.cart)
  },
  methods: {
    chooseAddress() {
      uni.navigateTo({
        url: "/pages/address/address?is_choose=true&scene=pay",
      });
    },
    submit() {
		if(this.address.addressUserName === undefined){
				  uni.showModal({
				  	content:"收货地址不能为空",
					showCancel:false
				  })
				  this.ensureAddressModalVisible = false;
				  return
		}
      this.ensureAddressModalVisible = true;
    },
    pay() {
	
      let opt = {
        url: "/order/createOrder",
        method: "post",
      };
      let param = {
        cart: JSON.stringify(this.cart),
        orderOpenId: this.openid,
        orderPhone: this.address.addressUserPhone,
        orderAdresss: this.address.addressDetailed + this.address.addressName,
      };
      this.$req.httpRequest(opt, param).then((res) => {
		  if(res.data.code!=200){
			  uni.showModal({
			  	content:res.data.msg,
			  	showCancel:false,
			  	success() {
			  		
			  	}
			  })
			  return
		  }
        uni.navigateTo({
        	url:"/pages/orders/detail?isFriend=true&orderNumber="+res.data.data,
        })
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.arrow {
  width: 50rpx;
  height: 50rpx;
  position: relative;
  margin-right: -10rpx;
}

.location {
  .store-name {
    font-size: $font-size-lg;
  }

  .iconfont {
    font-size: 50rpx;
    line-height: 100%;
    color: $color-primary;
  }
}

.section-1 {
  margin-bottom: 30rpx;
  .contact {
    .contact-tip {
      margin-left: 10rpx;
      border: 2rpx solid $color-primary;
      padding: 6rpx 10rpx;
      color: $color-primary;
    }
  }
}

.section-2 {
  .name-and-props {
    width: 65%;
  }
}

.payment {
  margin-bottom: 30rpx;

  .disabled {
    color: $text-color-grey;
  }

  .payment-icon {
    font-size: 44rpx;
    margin-right: 10rpx;
  }

  .checkbox {
    font-size: 36rpx;
    margin-left: 10rpx;
  }

  .checked {
    color: $color-primary;
  }
}

.pay-box {
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  height: 100rpx;
}

.modal-content {
  .change-address-btn {
    line-height: 2;
    padding: 0 1em;
  }
  .pay_btn {
    width: 100%;
    border-radius: 50rem !important;
    line-height: 3;
  }
}
</style>
